<template>
  <div class="top">
    <el-form :inline="true" size="default">
      <el-form-item label="执行器" lable-width="auto">
        <el-select v-model="tableQuery.jobGroup" placeholder="请选择" @change="groupChange"
                    filterable>
          <el-option
            v-for="item in groupListData"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" width="auto" class="triggerCondition">
        <el-select style="width: 160px;" v-model="tableQuery.triggerStatus" placeholder="请选择">
          <el-option
            v-for="item in triggerStatusEnum"
            :key="item.val"
            :label="item.title"
            :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="tableQuery.jobDesc" placeholder="请输入任务描述" clearable></el-input>
      </el-form-item>

      <el-form-item label="">
        <el-input v-model="tableQuery.executorHandler" placeholder="请输入JobHandler" clearable></el-input>
      </el-form-item>
      <el-form-item label="" >
        <el-input v-model="tableQuery.author" placeholder="请输入负责人" clearable></el-input>
      </el-form-item>
      <el-form-item class="searchBtn">
        <el-button type="primary" :icon="Search" @click="getJobList">查询</el-button>
      </el-form-item>
      <el-form-item class="addText">
        <el-button class="filter-item" :icon="Plus" @click="jobCreate" size="default"
                    :type="pageBoolean.addColor">{{ pageBoolean.addText }}
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="jobList"
      :default-sort="{ prop: 'triggerStatus', order: 'descending' }"
      v-loading="listLoading"
      element-loading-text="数据加载中，请稍后"
      border
      style="width: 100%">
      
      <el-table-column label="任务ID" align="center" prop="id" min-width="80" />

      <el-table-column label="任务描述" align="center" prop="jobDesc" min-width="120" />

      <el-table-column label="调度类型" align="center" min-width="120">
        <template #default="scope">
          {{ scope.row.glueType }}: {{ scope.row.executorHandler }}
        </template>
      </el-table-column>

      <el-table-column label="运行模式" align="center" min-width="120">
        <template #default="scope">
          {{ scope.row.scheduleType }}: {{ scope.row.scheduleConf }}
        </template>
      </el-table-column>

      <el-table-column label="负责人" align="center" prop="author" min-width="100" />

      <el-table-column 
        label="状态" 
        align="center" 
        min-width="100"
        :filters="[
          { text: 'RUNNING', value: 1 },
          { text: 'STOP', value: 0 }
        ]"
        :filter-method="filterTriggerStatus">
        <template #default="scope">
          <el-tag :type="scope.row.triggerStatus === 0 ? 'info' : 'success'">
            {{ formatTriggerStatus(scope.row.triggerStatus) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="120" fixed="right">
        <template #default="scope">
          <el-dropdown trigger="click" @command="(command) => handleRowOp(command, scope.row)">
            <el-button type="primary">
              操作<el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="beforeRunOnce">执行一次</el-dropdown-item>
                <el-dropdown-item command="viewLog">查询日志</el-dropdown-item>
                <el-dropdown-item command="regNode">注册节点</el-dropdown-item>
                <el-dropdown-item 
                  v-if="scope.row.scheduleType === 'CRON' || scope.row.scheduleType === 'FIX_RATE'"
                  command="nextTriggerTime">
                  下次执行时间
                </el-dropdown-item>

                <template v-if="scope.row.glueType.indexOf('GLUE') === 0">
                  <el-divider />
                  <el-dropdown-item command="openGlueIde">GLUE IDE</el-dropdown-item>
                </template>

                <el-divider />
                <el-dropdown-item command="startOrStop">
                  {{ scope.row.triggerStatus === 0 ? '启动' : '停止' }}
                </el-dropdown-item>
                <el-dropdown-item command="editJob">编辑</el-dropdown-item>
                <el-dropdown-item command="deleteJob">删除</el-dropdown-item>
                <el-dropdown-item command="copyJob">复制</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page.sync="tableQuery.currentPage"
        :page-size="tableQuery.length"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      :title="formDialogType=='create' ? '新增任务' : '编辑任务'"
      width="60%"
      center>
      <el-form :model="jobForm" :rules="rules" ref="jobFormRef" label-width="100px">
        <div style="width: 100%;">
          <form-group group-name="基础配置"/>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="执行器" prop="jobGroup">
              <el-select v-model="jobForm.jobGroup" placeholder="请选择">
                <el-option v-for="item in groupListData"
                           :key="item.id"
                           :label="item.title"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人" prop="author">
              <el-input v-model="jobForm.author" placeholder="请输入负责人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务描述" prop="jobDesc">
              <el-input v-model="jobForm.jobDesc" label="请输入任务描述"></el-input>
            </el-form-item>
            <el-form-item label="报警邮件" prop="alarmEmail">
              <el-input v-model="jobForm.alarmEmail" label="请输入任务描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div style="width: 100%;">
            <form-group group-name="调度配置"/>
          </div>
          <el-col :span="12">
            <el-form-item label="调度类型" prop="glueType">
              <el-select v-model="jobForm.scheduleType" placeholder="请选择">
                <el-option v-for="item in scheduleTypeEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="jobForm.scheduleType != 'NONE'">
            <el-form-item :label="jobForm.scheduleType === 'CRON' ? 'CRON' : '固定速度'" prop="scheduleConf">
              <el-input v-model="jobForm.scheduleConf" label="请输入Cron"></el-input>


              <el-popover v-model="showCron">
                <el-input slot="reference" @click="cronPopover=true"
                          v-model="cron" placeholder="请输入定时策略"
                          style="width: 40% ;margin-left: -50%">
                </el-input>
                <vueCron @change="changeCronHandle" @close="cronPopover=false" i18n="cn" />
              </el-popover>
            </el-form-item>
          </el-col>

        </el-row>
        <div style="width: 100%;">
          <form-group group-name="任务配置"/>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运行模式" prop="glueType">
              <el-select v-model="jobForm.glueType" placeholder="请选择" :disabled="formDialogType=='update'">
                <el-option v-for="item in glueTypeEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="JobHandler" prop="executorHandler">
              <el-input v-model="jobForm.executorHandler" label="executorHandler" :disabled="jobForm.glueType != null && jobForm.glueType.search('GLUE') === 0"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="任务参数" prop="executorParam">
              <el-input type="textarea" :rows="2" placeholder="请输入任务参数" v-model="jobForm.executorParam">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="chart-wrapper">
          <form-group group-name="高级配置"/>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="路由策略" prop="misfireStrategy">
              <el-select v-model="jobForm.executorRouteStrategy" placeholder="请选择">
                <el-option v-for="item in routeStrategyEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="调度过期策略" prop="misfireStrategy">
              <el-select v-model="jobForm.misfireStrategy" placeholder="请选择">
                <el-option v-for="item in failStrategyEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务超时时间" prop="executorTimeout">
              <el-input v-model.number="jobForm.executorTimeout" placeholder="请输入超时时间，单位秒，大于零时生效"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="子任务ID" prop="childJobId">
              <el-input v-model="jobForm.childJobId" placeholder="请输入子任务的ID,如果存在多个则逗号分隔"></el-input>
            </el-form-item>
            <el-form-item label="阻塞处理策略" prop="executorBlockStrategy">
              <el-select v-model="jobForm.executorBlockStrategy" placeholder="请选择">
                <el-option v-for="item in blockStrategyEnum"
                           :key="item.val"
                           :label="item.title"
                           :value="item.val"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="失败重试次数" prop="executorFailRetryCount">
              <el-input v-model.number="jobForm.executorFailRetryCount" placeholder="重试次数，大于零时生效"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="formDialogType=='create'" type="primary" @click="executorAddForm">新 增</el-button>
        <el-button v-else type="primary" @click="executorUpdateForm">更 新</el-button>
      </div>
    </el-dialog>

    <el-dialog width="50%" id="runOnceDialog" title="执行一次" :visible.sync="runOnceDialogVisible" center>
      <el-form :model="runOnceForm" ref="runOnceForm" label-width="80px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="任务参数" prop="executorParam">
              <el-input type="textarea" :rows="2" placeholder="请输入任务参数" v-model="runOnceForm.executorParam">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="机器地址" prop="addressList">
              <el-input type="textarea" :rows="2" placeholder="请输入任务参数" v-model="runOnceForm.addressList">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="runOnce">执 行</el-button>
        <el-button @click="runOnceDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus, ArrowDown } from '@element-plus/icons-vue'
import FormGroup from './components/FormGroup.vue'
import qs from 'qs'
import {getGroupList,groupDetail,createJob, getJobPageList, jobStop, jobStart, jobTrigger, removeJob, updateJob,nextTriggerTimeJob} from '@/api/scheduler'

// 响应式数据
const showCron = ref(false)
const cron = ref('')
const formDialogType = ref('')
const groupListData = ref([])
const disableJobHandler = ref(false)

const glueTypeEnum = ref([
  {val: 'BEAN',title: 'BEAN'},
  {val: 'GLUE_GROOVY',title:'GLUE(Groovy)'},
  {val:'GLUE_SHELL',title:'GLUE(Shell)'},
  {val:'GLUE_PYTHON',title:'GLUE(Python)'},
  {val:'GLUE_PHP',title:'GLUE(PHP)'},
  {val:'GLUE_NODEJS',title:'GLUE(NodeJs)'},
  {val:'GLUE_POWERSHELL',title:'GLUE(PowerShell)'}
])

const scheduleTypeEnum = ref([
  {val:'NONE',title:'无'},
  {val: 'CRON',title: 'CRON'},
  {val: 'FIX_RATE',title: '固定速度'}
])

const routeStrategyEnum = ref([
  {val:'FIRST',title:'第一个'},
  {val:'LAST',title:'最后一个'},
  {val:'ROUND',title:'轮询'},
  {val:'RANDOM',title:'随机'},
  {val:'CONSISTENT_HASH',title:'一致性HASH'},
  {val:'LEAST_FREQUENTLY_USED',title:'最不经常使用'},
  {val:'LEAST_RECENTLY_USED',title:'最近最久未使用'},
  {val:'FAILOVER',title:'故障转移'},
  {val:'BUSYOVER',title:'忙碌转移'},
  {val: 'SHARDING_BROADCAST',title:'分片广播'}
])

const blockStrategyEnum = ref([
  {val:'SERIAL_EXECUTION',title:'单机串行'},
  {val:'DISCARD_LATER',title:'丢弃后续调度'},
  {val:'COVER_EARLY',title:'覆盖之前调度'}
])

const failStrategyEnum = ref([
  {val:'DO_NOTHING',title:'忽略'},
  {val:'FIRE_ONCE_NOW',title:'立即执行一次'}
])

const triggerStatusEnum = ref([
  {val:-1,title:'全部'},
  {val: 1, title: 'RUNNING'},
  {val: 0, title: 'STOP'}
])

const jobList = ref(null)
const total = ref(0)
const listLoading = ref(true)

const dialogFormVisible = ref(false)
const runOnceDialogVisible = ref(false)

const tableQuery = ref({
  jobGroup: null,
  triggerStatus: -1,
  jobDesc: '',
  executorHandler: '',
  author: '',
  length: 10,
  start: 0,
  currentPage: 1
})

const groupQuery = ref({
  title: '',
  start: 0,
  length: 100
})

const jobForm = ref({
  id: null,
  jobGroup: null,
  executorRouteStrategy: 'RANDOM',
  scheduleType: 'CRON',
  glueType: 'BEAN',
  executorParam: '',
  executorBlockStrategy: 'SERIAL_EXECUTION',
  executorTimeout: 0,
  author: '',
  jobDesc: '',
  scheduleConf: '',
  executorHandler: '',
  childJobId: null,
  misfireStrategy: 'DO_NOTHING',
  alarmEmail: ''
})

const rules = ref({
  jobGroup: [{required: true, message: '请选择执行器', trigger: 'blur'}],
  author: [{required: true, message: '请输入负责人', trigger: 'blur'}],
  jobDesc: [{required: true, message: '请输入任务描述', trigger: 'blur'}],
  scheduleType: [{required: true, message: '请选择调度类型', trigger: 'blur'}],
  scheduleConf: [{required: true, message: '请输入Cron表达式', trigger: 'blur'}],
  glueType: [{required: true, message: '请选择运行模式', trigger: 'blur'}],
  executorHandler: [{required: true, message: '请输入执行器BEAN名称', trigger: 'blur'}],
  misfireStrategy: [{required: false, message: '请选择失败策略', trigger: 'blur'}],
  alarmEmail: [{required: false, message: '请输入邮箱地址', trigger: 'blur'}, {
    type: 'email',
    message: '请输入正确的邮箱地址',
    trigger: ['blur', 'change']
  }],
})

const runOnceForm = ref({
  id: null,
  executorParam: '',
  addressList: ''
})

const registerAddrList = ref([])
const pageBoolean = ref({
  delColor: 'primary',
  delText: '批量删除',
  addColor: 'success',
  addText: '添加任务'
})
const operateText = ref(['执行', '暂停', '删除'])

// 首先添加表单的ref
const jobFormRef = ref(null)

// 方法定义
const getJobList = async () => {
  try {
    const res = await getJobPageList(qs.stringify(tableQuery.value))
    const { data, recordsTotal } = res
    total.value = recordsTotal
    jobList.value = data
    listLoading.value = false
  } catch (err) {
    listLoading.value = false
    console.error(err)
  }
}

const refreshJobList = () => {
  tableQuery.value.start = 0
  tableQuery.value.currentPage = 1
  getJobList()
}

const jobCreate = () => {
  jobForm.value = {
    id: null,
    jobGroup: null,
    executorRouteStrategy: 'RANDOM',
    scheduleType: 'CRON',
    glueType: 'BEAN',
    executorParam: '',
    executorBlockStrategy: 'SERIAL_EXECUTION',
    executorTimeout: 0,
    author: '',
    jobDesc: '',
    scheduleConf: '',
    executorHandler: '',
    childJobId: null,
    misfireStrategy: 'DO_NOTHING',
    alarmEmail: ''
  }
  dialogFormVisible.value = true
  formDialogType.value = 'create'
}

const executorAddForm = () => {
  jobFormRef.value?.validate((valid) => {
    if (valid) {
      delete jobForm.value.id
      createJob(qs.stringify(jobForm.value)).then(res => {
        if (res.code === 200) {
          dialogFormVisible.value = false
          ElMessage({
            message: "新增成功",
            type: 'success'
          })
          refreshJobList()
        } else {
          ElMessage(res.msg)
        }
      }).catch(function (err) {
        console.log(err.message)
      })
    } else {
      return false;
    }
  });
}

const editJob = (row) => {
  dialogFormVisible.value = true
  formDialogType.value = 'update'
  // 先重置表单
  nextTick(() => {
    jobFormRef.value?.resetFields()
    // 然后设置新值
    jobForm.value = {
      ...row,
      executorTimeout: Number(row.executorTimeout) || 0,
      executorFailRetryCount: Number(row.executorFailRetryCount) || 0
    }
    delete jobForm.value.addTime
    delete jobForm.value.glueUpdatetime
    delete jobForm.value.updateTime
    delete jobForm.value.triggerLastTime
    delete jobForm.value.triggerNextTime
  })
}

const executorUpdateForm = () => {
  jobFormRef.value?.validate((valid) => {
    if (valid) {
      if (jobForm.value.executorFailRetryCount == null){
        jobForm.value.executorFailRetryCount = 0
      }
      if (jobForm.value.executorTimeout == null){
        jobForm.value.executorTimeout = 0
      }
      updateJob(qs.stringify(jobForm.value)).then(res => {
        if (res.code === 200) {
          dialogFormVisible.value = false
          ElMessage({
            message: "更新成功",
            type: 'success'
          })
          refreshJobList()
        } else {
          ElMessage(res.msg)
        }
      }).catch(function (err) {
        console.log(err.message)
      })
    } else {
      return false;
    }
  });
}

const beforeRunOnce = (row) => {
  runOnceForm.value.id = row.id
  runOnceForm.value.executorParam = row.executorParam
  runOnceDialogVisible.value = true
}

const runOnce = () => {
  jobTrigger(qs.stringify(runOnceForm.value)).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "触发成功",
        type: 'success'
      })
    } else {
      ElMessage(res.msg)
    }
  }).catch(function (err) {
    ElMessage(err)
  })
  runOnceDialogVisible.value = false
}

const regNode = (id) => {
  groupDetail(id).then(res => {
    let innerHtml = ''
    if (res.code === 200) {
      let registryList = res.content.registryList
      for (const index in registryList) {
        innerHtml = innerHtml + '<span class="onlineNode">' + (Number(index) + 1) + '. ' + registryList[index] + '</span>'
      }
    }
    ElMessageBox.alert(innerHtml, '注册节点', {
      dangerouslyUseHTMLString: true
    });
  })
}
const fetchGroupList = () => {
  groupQuery.value.appname = '';
  getGroupList(qs.stringify(groupQuery.value)).then(res => {
    const {data, recordsTotal} = res
    
    groupListData.value = data
    if (recordsTotal === 0) {
      ElMessage({
        message: '执行器列表为空,需要先创建执行器',
        type: 'warning'
      })
      return
    }
    tableQuery.value.jobGroup = data[0].id
    jobForm.value.jobGroup = data[0].id
    getJobList()
  }).catch(function (err) {
    console.log(err)
  })
}

const nextTriggerTime = (scheduleType, scheduleConf) => {
  nextTriggerTimeJob(scheduleType, scheduleConf).then(res => {
    let innerHtml= ''
    if(res.code === 200){
      let triggerTimeList = res.content
      for (const index in triggerTimeList) {
        innerHtml = innerHtml+'<span class="triggerTimeList">'+triggerTimeList[index]+'</span></br>'
      }
    }
    ElMessageBox.alert(innerHtml, '下次执行时间', {
      dangerouslyUseHTMLString: true,
      center: true
    });
  })
}

const startOrStop = (row) => {
  let status = row.triggerStatus
  let statusDesc = status === 1 ? '停止' : '启动'
  ElMessageBox.confirm('确认' + statusDesc + '该任务？','提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(res => {
    if (status === 1) {
      jobStop(row.id).then(res => {
        if(res.code === 200){
          ElMessage({message:'操作成功',type:'success'})
          refreshJobList()
        }else{
          ElMessage({message:res.msg,type:'error'})
        }
      })
    } else if (status === 0) {
      jobStart(row.id).then(res => {
        if(res.code === 200){
          ElMessage({message:'操作成功',type:'success'})
          refreshJobList()
        }else{
          ElMessage({message:res.msg,type:'error'})
        }
      })
    }
  }).catch(reject => console.log(reject))
}

const deleteJob = (id) => {
  ElMessageBox.confirm('确认删除该任务？','提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warn'
    }
  ).then(res => {
    removeJob(id).then(res => {
      if (res.code === 200) {
        ElMessage({
          message: "删除成功",
          type: 'success'
        })
        refreshJobList()
      } else {
        ElMessage({
          message: res.msg,
          type: 'error'
        })
      }
    }).catch(function (err) {
      ElMessage(err)
    })
  }).catch(reject => console.log(reject))
}

const copyJob = (row) => {
  jobForm.value = row
  delete jobForm.value.addTime
  delete jobForm.value.updateTime
  delete jobForm.value.glueUpdatetime
  delete jobForm.value.triggerLastTime
  delete jobForm.value.triggerNextTime
  delete jobForm.value.glueSource
  delete jobForm.value.glueRemark
  formDialogType.value = 'create'
  dialogFormVisible.value = true
}

const openGlueIde = () => {
  ElMessageBox.alert('该功能尚在开发', '提示', {
    confirmButtonText: '确定',
    callback: action => {
    }
  })
}

const filterTriggerStatus = (value, row) => {
  return row.triggerStatus === value
}

const formatTriggerStatus = (status) => {
  return status === 1 ? 'RUNNING' : 'STOP'
}

const handleSizeChange = (val) => {
  tableQuery.value.length = val
  tableQuery.value.start = 0
  getJobList()
}

const handleCurrentChange = (val) => {
  tableQuery.value.start = (val - 1) * tableQuery.value.length
  tableQuery.value.currentPage = val
  getJobList()
}

const changeCronHandle = (val) => {
  jobForm.value.scheduleConf = val
}

const groupChange = (item) => {
  tableQuery.value.jobGroup = item
  jobForm.value.jobGroup = item
}

const handleRowOp = (command, row) => {
  switch (command) {
    case 'beforeRunOnce':
      beforeRunOnce(row)
      break
    case 'viewLog':
      // 查看日志逻辑
      break
    case 'regNode':
      regNode(row.id)
      break
    case 'nextTriggerTime':
      nextTriggerTime(row.scheduleType, row.scheduleConf)
      break
    case 'openGlueIde':
      openGlueIde()
      break
    case 'startOrStop':
      startOrStop(row)
      break
    case 'editJob':
      editJob(row)
      break
    case 'deleteJob':
      deleteJob(row.id)
      break
    case 'copyJob':
      copyJob(row)
      break
  }
}

// 生命周期钩子
onMounted(() => {
  // initEnums()
  fetchGroupList()
})

// 监听器
watch(() => jobForm.value.scheduleType, (val) => {
  if(val === 'NONE') {
    jobForm.value.scheduleConf = ''
  }
})
</script>

<style rel="stylesheet/scss" lang="scss" slot-scope>
.top {
  padding: 10px;
}

.fitersLine {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    width: 130px !important;
  }
  :deep(.el-form-item__label) {
    min-width: auto !important;
  }
  .searchBtn {
    width: 60px !important;
  }
}

:deep(.el-dialog__body) {
  padding: 0px 25px 0px;
}

.triggerCondition {
  :deep(.el-form-item__content) {
    width: 100px !important;
  }
}

:deep(.el-table .cell) {
  line-height: 1;
  padding: 0 3px;
}

:deep(.el-dialog) {
  max-width: 642px;
}

.onlineNode {
  background-color: springgreen;
  border-radius: 10px;
  padding: 3px 10px;
}

.triggerTimeList {
  margin-left: 20%;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

:deep(.el-table) {
  --el-table-row-hover-bg-color: var(--el-fill-color-light);
  
  .el-table__body tr:hover > td {
    background-color: var(--el-table-row-hover-bg-color) !important;
  }
}

:deep(.el-dropdown) {
  .el-button {
    display: flex;
    align-items: center;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.el-button--mini {
  padding: 7px 10px;
}

.el-button + .el-button {
  margin-left: 1px;
}

.el-upload {
  text-align: left
}


.el-dialog__header {
  padding-bottom: 0;
}

.el-steps--simple {
  margin: 10px 0;
}

.border-none {
  input {
    border: none;
    padding: 0;
    text-align: center;
    &:focus {
      border: 1px solid #dcdfe6
    }
  }
}

.el-table--enable-row-hover {
  .el-table__body {
    tr:hover > td {
      background: transparent;
    }
  }
}

</style>
